<!-- 这是导航条中的搜索框组件 -->
<template>
    <div class="search-box">
        <el-input v-model.trim="keyword" @keyup.native.enter="search" placeholder="请输入想要的商品"></el-input>
        <el-button icon="el-icon-search" @click="search">搜索</el-button>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                keyword: ""
            };
        },
        methods: {
            search() {
                if (!this.keyword) {
                    this.$message({
                        type: "warning",
                        message: "搜索内容不能为空"
                    });
                }else{
                    // 有关键字时,跳转到搜索页
                    this.$router.push("/search?key="+this.keyword)
                }
            }
        }
    };
</script>
<style scoped>
    .search-box {
        width: 600px;
    }
    /* 如果需要修改第三方组件中的样式, 有三种修改思路 
    1, 因为第三方组件最终会被渲染成原生html标签, 所以直接修改原生html标签即可, 通过标签名或者渲染之后的class值选择器都可以 */
    button:hover, .el-button:focus{
        background-color: #80008010 ;
        color: #800080;
        border: 0.5px solid #80008044;
    }
    /* 2, 如果第三方组件中已经对标签设置了样式,使用第一种方式失效,因为标签名选择器优先级较低, 此时,添加!important提高优先级,即可使样式生效*/
    input{
        border-color: red !important;
    }

    /* 3, 有些样式, 提高优先级也不生效, 因为style标签有scoped属性,产生了样式隔离, 当前组件设置的样式有时不能在第三方组件生效,  此时可以用  vue 样式穿透   >>>   */

    /* 样式穿透: 摆脱样式隔离限制, 一般用来修改第三方组件中的样式*/
    /* 基本结构:  当前组件标签选择器>>>第三方组件标签选择器*/
    .search-box>>>.el-input {
        width: 400px;
    }
    .search-box>>>input {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-right: none;
    }
    .search-box>>>input:focus {
        border-color: #800080;
    }
    .search-box>>>button {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
</style>